<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="Blockshell Web for Blockshell CLI">
        <meta name="author" content="Daxeel Soni">
        <title>Blockshell | All Blocks</title>
        <!-- Bootstrap core CSS -->
        <link href="https://blackrockdigital.github.io/startbootstrap-bare/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <!-- Custom styles for this template -->
        <style>
            body {
            padding-top: 54px;
            }
            @media (min-width: 992px) {
            body {
            padding-top: 56px;
            }
            }
            footer {
            position: fixed;
            height: 40px;
            bottom: 0;
            width: 100%;
            background-color: #e7e7e7;
            padding-left: 80px;
            padding-top: 10px;
            color: #000;
            }
            .code {
            background: #192a56;
            color: #fff;
            padding: 10px;
            }
        </style>
    </head>
    <body>
        <!-- Navigation -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
            <div class="container">
                <a class="navbar-brand" href="/">BlockShell</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#" data-toggle="modal" data-target="#exampleModal">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/allblocks">Mined Blocks</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- Page Content -->
        <div class="container">
            <div class="row">
                <div class="col-lg-10" style="margin-top:20px;">
                    <!-- <p><img src="https://image.ibb.co/dHkZyb/Logomakr_3_Of_FH7.png" height="100"></p> -->
                    <h2 id="introduction">🏁  Introduction</h2>
                    <p>Blockshell works on blockchain concepts and it creates a tiny blockchain in your local system. So, you will actually learn the concepts like blocks, mining, hashing, proof of work and lot more.</p>
                    <p>So, with blockshell you will be creating blocks with simple commands and rest of the tasks will be handled by Blockshell. In this wiki I will try to explain how Blockshell works behind every commands and how it is executing blockchain.</p>
                    <p>Let's get start! </p>
                    <h2 id="initializenewblockchain">🆕  Initialize New Blockchain</h2>
                    <p>First we will initialize the new blockchain with following command in blockshell CLI.</p>
                    <p class="code">[BLOCKSHELL] $ blockshell init --difficulty 3</p>
                    <p>Above command initializes new blockchain and creates <strong>chain.txt</strong> in your working directory where our blockchain data will be stored. You can compare this chain.txt file as real world blockchain's <strong>ledger</strong>.</p>
                    <p><strong>--difficulty</strong> number indicates the difficulty level for blockchain's proof of work. More the number, more time will be taken to mine new block in our blockchain.</p>
                    <p>In our blockchain we have Initial Zeros Proof of Work algorithm. So, when we want to mine new block, our PoW will look for the hash that has the initial 3 characters are zeros(0) as right now our blockchain's difficulty level is set to 3 at the time of initialization.</p>
                    <p>Eg. hash</p>
                    <p class="code">0002fdd96ffec46277a753fa983773599c816dcf100c956afae0a4853fd1ce32</p>
                    <h2 id="minefirstblock">⛏️  Mine First Block</h2>
                    <p>Let's store some data and Mine very first block of our blockchain by doing PoW.</p>
                    <p class="code">[BlockShell] $ dotx hello blockchain</p>
                    <p>Blockshell comes with build-in command <strong>dotx</strong> which is used to create a new transaction and this will mine new block with given data (eg. hello blockchain)</p>
                    <p>Output</p>
                    <p class="code">[Status] Mining block (1) with PoW ...<br>
                        [ Info ] Time Elapsed : 0.0164740085602 seconds.<br>
                        [ Info ] Mined Hash : 000eea381e45c9f6c1c330cf991b5b1e7d15f739da3894b703e412881b2c2edd
                    </p>
                    <p>Mining this block will depend on the difficulty level of the blockchain. Right now difficulty is of 3 and thats why our block mined in less than a second. After mining action, we received hash of that block with 3 initials as zero as difficulty is 3.</p>
                    <h2 id="genesisblocks">📦  Genesis Blocks</h2>
                    <p>First block in blockchain is known as Genesis block and which is created manually at the time of blockchain development. In our case, creation of this genesis block is handled by Blockshell. When we initialized the blockchain, it also created genesis block. Lets check this out.</p>
                    <h2 id="exploreblockchain">🕸️  Explore Blockchain</h2>
                    <p>Now, we have 2 blocks in our blockchain. First is <strong>genesis block</strong> and other we created in previous step and that contains data <strong>hello blockchain</strong></p>
                    <p>List all blocks in blockchain with following command</p>
                    <p class="code">[BlockShell] $ allblocks</p>
                    <p>This lists hashes of all the blocks.
                        Output
                    </p>
                    <p class="code">338a2d1ac1b8135283ae19a304b2b426b69b9caba7ef462f246fc577a0297230
                        000eea381e45c9f6c1c330cf991b5b1e7d15f739da3894b703e412881b2c2edd
                    </p>
                    <h2 id="viewblockdata">ℹ️  View Block Data</h2>
                    <p>Let's check what's inside each block. For this Blockshell has <strong>getblock</strong> command.</p>
                    <p>Here, <strong>338a2d1ac1b8135283ae19a304b2b426b69b9caba7ef462f246fc577a0297230</strong> is genesis block. Let's look inside our genesis block</p>
                    <p class="code">[BlockShell] $ getblock 338a2d1ac1b8135283ae19a304b2b426b69b9caba7ef462f246fc577a0297230</p>
                    <p>Output</p>
                    <pre><code><p class="code">{
    'nonce': 0,
    'index': 0,
    'hash': '338a2d1ac1b8135283ae19a304b2b426b69b9caba7ef462f246fc577a0297230',
    'previousHash': '',
    'timestamp': '2018-01-27 20:13:44.835930',
    'data': 'Genesis Block'
}
</p></code></pre>
                    <p>Similarly, let's check what's inside our own created block.</p>
                    <p class="code">[BlockShell] $ getblock 000eea381e45c9f6c1c330cf991b5b1e7d15f739da3894b703e412881b2c2edd</p>
                    <p>Output</p>
                    <pre><code>
<p class="code">{
    'nonce': 1959,
    'index': 1,
    'hash': '000eea381e45c9f6c1c330cf991b5b1e7d15f739da3894b703e412881b2c2edd',
    'previousHash': '338a2d1ac1b8135283ae19a304b2b426b69b9caba7ef462f246fc577a0297230',
    'timestamp': '2018-01-27 20:15:01.515716',
    'data': 'hello blockchain'
}
</p></code></pre>
                    <h2 id="launchblockshellweb">🌐  Launch Blockshell Web</h2>
                    <p><img src="https://camo.githubusercontent.com/c9b552114993e55b13a1f6c6a25b47a4c02a3572/68747470733a2f2f707265766965772e6962622e636f2f695a61356a472f53637265656e5f53686f745f323031385f30315f32355f61745f31315f32355f32325f504d2e706e67"></p>
                    <p>Blockshell comes with built-in Blockchain web explorer. You can search blocks and data in your blockchain from your web browser.</p>
                    <p>Open new terminal, go to cloned Blockshell directory and run web.py python script.</p>
                    <p class="code">python web.py</p>
                    <p>Go to localhost <a href="http://127.0.0.1:5000/allblocks">127.0.0.1:5000/allblocks</a> in browser and give it a shot!</p>
                </div>
                <div class="col-lg-2" style="margin-top:80px;">
                    <div class="card" style="width: 13rem;">
                        <img class="card-img-top" src="https://preview.ibb.co/e7SO4G/Logomakr_1rc0_PA.png" alt="Card image cap">
                        <div class="card-body">
                            <h5 class="card-title">About Project</h5>
                            <p class="card-text">Project BlockShell is created by with a vision to teach blockchain concepts to students and programmers.</p>
                            <a href="https://daxeel.github.io" target="_blank" class="btn btn-primary">Contact Creator</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Blockshell Creator</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-4">
                                <img class="card-img-top" src="https://image.ibb.co/nqzp4w/Daxeel_3.jpg" alt="Card image cap">
                                <br><br>
                                <a href="https://daxeel.github.io" target="_blank" class="btn btn-primary col-md-12">View Profile</a>
                            </div>
                            <div class="col-md-8">
                                <h5 class="card-title">Daxeel Soni</h5>
                                <p class="card-text">Young software engineer and with the passion of startup product building using tech skills. I am a co-lead of Facebook Developers Circle, Ahmedabad. A technology educator and speaker invited to various institutes and events such as IIM, Nirma, Google Developers Group, Facebook events etc.</p>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- <footer class="fixed-bottom">
            <p>Project by <a href="https://daxeel.github.io" target="_blank">Daxeel Soni</a></p>
            </footer> -->
        <!-- Bootstrap core JavaScript -->
        <script src="https://blackrockdigital.github.io/startbootstrap-bare/vendor/jquery/jquery.min.js"></script>
        <script src="https://blackrockdigital.github.io/startbootstrap-bare/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    </body>
</html>
